<template>
  <section class="control-wrapper">
    <section class="left-box">
      <sider></sider>
      <div class="control-icon" >
        <MenuFoldOutlined />
      </div>
    </section>
    <section class="right-box">
      <router-view></router-view>
    </section>
  </section>
</template>

<script>
import { MenuFoldOutlined, MenuUnfoldOutlined } from "@ant-design/icons-vue";
import sider from "./components/sider.vue";
MenuFoldOutlined;
export default {
  name: "ControlIndex",
  components: {
    sider,
    MenuFoldOutlined,
    MenuUnfoldOutlined,
  },
  data(){
    return{

    }
  },
  methods:{

  }
};
</script>

<style lang="scss">
.control-wrapper {
  display: flex;
  .left-box {
    width: 220px;
    position: relative;
    .control-icon {
      position: absolute;
      top: 100px;
      right: -40px;
      width: 40px;
      height: 46px;
      border:1px solid #225B9D;
      border-left:0;
      cursor: pointer;
      text-align: center;
      background: #1C4175;
      border-radius: 0 6px 6px 0;
      .anticon{
        line-height:46px;
        color:#29CFF4;
        font-size:24px;
      }
    }
  }
  .right-box {
    width: calc(100% - 220px);
     background: url("../../assets/images/homeBg.png") no-repeat;
        background-size: 100% 100%;
    color:#fff;
  }
}
</style>